<template>
  <div>
    <el-input v-model="model.keyword" placeholder="请输入内容">
      <template #prepend>
        <el-select v-model="model.selectValue" placeholder="请选择" style="width: 84px;">
          <el-option
            v-for="item in modelValue.selectOption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </template>
      <template #append>
        <el-button type="primary" @click="searchHandle">搜索</el-button>
      </template>
    </el-input>
  </div>
</template>

<script setup>
import { computed } from "vue";
const props = defineProps({
  modelValue:{
    type:Object,
    required:true
  }
})

const emit = defineEmits(['update:modelValue','searchHandle'])
const model = computed({
  get:() => new Proxy(props.modelValue,{
    set:(target,name,value) => {
      console.log('target',target,'name',name,'value',value);
      
      emit('update:modelValue',{
        ...target,
        [name]:value
      }
    )
      return true
    }
  }),
  set:(val) => {
    console.log('val',val)
    emit('update:modelValue',val)
  }
})
// 搜索
const searchHandle = () => {
  console.log('搜索',props.modelValue)
  emit('searchHandle',props.modelValue)
}
</script>

<style scoped>

</style>